// 定义业务选择状态的接口
interface BizSelectState {
	model: any;
	emit: any;
	label: string;
	value: string;
	queryParams: any;
	pageList: Function;
	columns: Array<any>;
}

// 自定义钩子函数，接收一个业务选择状态
export function useBizSelect(userState: BizSelectState) {
	// 定义查询表单的响应式对象
	const queryForm = reactive({});

	// 定义组件的响应式状态
	const state = reactive({
		label: userState.label, // 标签
		value: userState.value, // 值
		data: '', // 数据
		columns: userState.columns, // 列
		table: {
			total: 30, // 总数
			data: [], // 数据数组
			currentPage: 1, // 当前页
			pageSize: 10, // 每页大小
		},
	});

	// 监听 state.data 的变化
	watch(
		() => state.data,
		(newVal) => {
			userState.model.value = newVal;	 // 都则model值无法赋值
			queryForm[state.value] = newVal; // 更新查询表单的 查询条件
		}
	);

	// 组件挂载时执行
	onMounted(async () => {
		if (userState.model.value){
			state.data = userState.model.value;
		}
		if (state.data) {
			queryForm[state.value] = state.data; // 初始化时设置 查询条件
		}
		await getData(); // 获取数据
	});

	// 获取数据的异步函数
	const getData = async () => {
		const res = await userState.pageList({
			...queryForm,
			...userState.queryParams,
			current: state.table.currentPage, // 当前页
			size: state.table.pageSize, // 每页大小
		});
		state.table.data = res.data.records; // 更新表格数据
		state.table.total = res.data.total; // 更新总数
	};

	// 输入变化时调用
	const inputChange = (val: string) => {
		queryForm[state.value] = val; // 更新 查询条件
		getData(); // 获取数据
	};

	// 输入框失去焦点时调用
	const blurInput = () => {
		queryForm[state.value] = state.data || ''; // 重置 查询条件
		state.table.currentPage = 1; // 重置当前页
		getData(); // 获取数据
	};

	// 当前页变化时调用
	const currentChange = (val: number) => {
		state.table.currentPage = val; // 更新当前页
		getData(); // 获取数据
	};

	// 每页大小变化时调用
	const sizeChange = (val: number) => {
		state.table.pageSize = val; // 更新每页大小
		getData(); // 获取数据
	};

	// 清除数据
	const clear = () => {
		userState.emit('change', null);
		state.table.currentPage = 1; // 重置当前页
		state.data = ''; // 清空数据
		queryForm[state.value] = ''; // 清空 查询条件
		getData(); // 获取数据
	};
	const changeData = (val)=>{
		userState.emit('change', null);
		state.table.currentPage = 1; // 重置当前页
		state.data = val; // 清空数据
		queryForm[state.value] = val; // 清空 查询条件
		getData(); // 获取数据
	}

	const handleRowClick = (row: any) => {
		userState.emit('change', row);
	};

	// 返回可用的函数和状态
	return {
		state,
		inputChange,
		changeData,
		blurInput,
		currentChange,
		sizeChange,
		clear,
		handleRowClick,
	};
}
